{% extends "members/base.html" %}

{% block title %}会员套餐{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="text-center mb-5">
        <h2 class="mb-3">选择适合您的会员套餐</h2>
        <p class="text-muted">专业的心理量表管理和数据分析服务，满足不同规模的需求</p>
    </div>

    <div class="row justify-content-center">
        <!-- 基础会员 -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card plan-card h-100">
                <div class="card-header text-center plan-header bg-light">
                    <div class="plan-icon">
                        <i class="bi bi-person"></i>
                    </div>
                    <h4 class="plan-title">基础会员</h4>
                    <div class="plan-price">
                        <span class="price">免费</span>
                    </div>
                    <p class="text-muted">适合个人咨询师</p>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled plan-features">
                        <li><i class="bi bi-check text-success me-2"></i>3个基础量表</li>
                        <li><i class="bi bi-check text-success me-2"></i>每月50次测评</li>
                        <li><i class="bi bi-check text-success me-2"></i>基础数据统计</li>
                        <li><i class="bi bi-check text-success me-2"></i>数据导出PDF</li>
                        <li><i class="bi bi-x text-muted me-2"></i>自定义量表</li>
                        <li><i class="bi bi-x text-muted me-2"></i>高级数据分析</li>
                        <li><i class="bi bi-x text-muted me-2"></i>API接口</li>
                    </ul>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-outline-primary w-100" disabled>
                        当前套餐
                    </button>
                </div>
            </div>
        </div>

        <!-- 专业会员 -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card plan-card h-100 border-primary">
                <div class="card-header text-center plan-header bg-primary text-white">
                    <div class="plan-icon">
                        <i class="bi bi-star"></i>
                    </div>
                    <h4 class="plan-title">专业会员</h4>
                    <div class="plan-price">
                        <span class="price">¥299</span>
                        <span class="period">/月</span>
                    </div>
                    <p class="mb-0">推荐选择</p>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled plan-features">
                        <li><i class="bi bi-check text-success me-2"></i>所有基础功能</li>
                        <li><i class="bi bi-check text-success me-2"></i>20个专业量表</li>
                        <li><i class="bi bi-check text-success me-2"></i>每月500次测评</li>
                        <li><i class="bi bi-check text-success me-2"></i>创建自定义量表</li>
                        <li><i class="bi bi-check text-success me-2"></i>高级数据分析</li>
                        <li><i class="bi bi-check text-success me-2"></i>Excel数据导出</li>
                        <li><i class="bi bi-check text-success me-2"></i>邮件技术支持</li>
                    </ul>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-primary w-100">
                        立即升级
                    </button>
                </div>
            </div>
        </div>

        <!-- 机构会员 -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card plan-card h-100">
                <div class="card-header text-center plan-header bg-success text-white">
                    <div class="plan-icon">
                        <i class="bi bi-building"></i>
                    </div>
                    <h4 class="plan-title">机构会员</h4>
                    <div class="plan-price">
                        <span class="price">¥999</span>
                        <span class="period">/月</span>
                    </div>
                    <p class="mb-0">适合小型机构</p>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled plan-features">
                        <li><i class="bi bi-check text-success me-2"></i>所有专业功能</li>
                        <li><i class="bi bi-check text-success me-2"></i>50个专业量表</li>
                        <li><i class="bi bi-check text-success me-2"></i>每月2000次测评</li>
                        <li><i class="bi bi-check text-success me-2"></i>多用户管理</li>
                        <li><i class="bi bi-check text-success me-2"></i>团队协作功能</li>
                        <li><i class="bi bi-check text-success me-2"></i>API接口调用</li>
                        <li><i class="bi bi-check text-success me-2"></i>专属客服支持</li>
                    </ul>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-success w-100">
                        联系销售
                    </button>
                </div>
            </div>
        </div>

        <!-- 科研会员 -->
        <div class="col-lg-3 col-md-6 mb-4">
            <div class="card plan-card h-100">
                <div class="card-header text-center plan-header bg-warning text-dark">
                    <div class="plan-icon">
                        <i class="bi bi-mortarboard"></i>
                    </div>
                    <h4 class="plan-title">科研会员</h4>
                    <div class="plan-price">
                        <span class="price">¥1999</span>
                        <span class="period">/月</span>
                    </div>
                    <p class="mb-0">适合科研院所</p>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled plan-features">
                        <li><i class="bi bi-check text-success me-2"></i>所有机构功能</li>
                        <li><i class="bi bi-check text-success me-2"></i>无限量表使用</li>
                        <li><i class="bi bi-check text-success me-2"></i>无限次测评</li>
                        <li><i class="bi bi-check text-success me-2"></i>高级统计分析</li>
                        <li><i class="bi bi-check text-success me-2"></i>数据挖掘工具</li>
                        <li><i class="bi bi-check text-success me-2"></i>定制化开发</li>
                        <li><i class="bi bi-check text-success me-2"></i>一对一技术支持</li>
                    </ul>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-warning w-100">
                        申请试用
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 功能对比表 -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-table me-2"></i>功能详细对比</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>功能特性</th>
                                    <th class="text-center">基础会员</th>
                                    <th class="text-center">专业会员</th>
                                    <th class="text-center">机构会员</th>
                                    <th class="text-center">科研会员</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>量表数量</td>
                                    <td class="text-center">3个</td>
                                    <td class="text-center">20个</td>
                                    <td class="text-center">50个</td>
                                    <td class="text-center">无限</td>
                                </tr>
                                <tr>
                                    <td>月测评次数</td>
                                    <td class="text-center">50次</td>
                                    <td class="text-center">500次</td>
                                    <td class="text-center">2000次</td>
                                    <td class="text-center">无限</td>
                                </tr>
                                <tr>
                                    <td>自定义量表</td>
                                    <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                                    <td class="text-center"><i class="bi bi-check text-success"></i></td>
                                    <td class="text-center"><i class="bi bi-check text-success"></i></td>
                                    <td class="text-center"><i class="bi bi-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>数据导出</td>
                                    <td class="text-center">PDF</td>
                                    <td class="text-center">PDF, Excel</td>
                                    <td class="text-center">PDF, Excel, CSV</td>
                                    <td class="text-center">全格式</td>
                                </tr>
                                <tr>
                                    <td>API接口</td>
                                    <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                                    <td class="text-center"><i class="bi bi-x text-danger"></i></td>
                                    <td class="text-center"><i class="bi bi-check text-success"></i></td>
                                    <td class="text-center"><i class="bi bi-check text-success"></i></td>
                                </tr>
                                <tr>
                                    <td>技术支持</td>
                                    <td class="text-center">社区</td>
                                    <td class="text-center">邮件</td>
                                    <td class="text-center">专属客服</td>
                                    <td class="text-center">一对一</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 常见问题 -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-question-circle me-2"></i>常见问题</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h6>如何升级会员？</h6>
                            <p class="text-muted">点击对应套餐的升级按钮，选择支付方式完成付款即可立即生效。</p>
                            
                            <h6>可以随时取消吗？</h6>
                            <p class="text-muted">可以随时取消自动续费，当前周期仍然有效，到期后自动降级。</p>
                        </div>
                        <div class="col-md-6">
                            <h6>支持哪些支付方式？</h6>
                            <p class="text-muted">支持微信支付、支付宝、银行卡等多种支付方式。</p>
                            
                            <h6>企业用户如何开发票？</h6>
                            <p class="text-muted">机构会员和科研会员支持开具专用发票，请联系客服办理。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .plan-card {
        border-radius: 15px;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .plan-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .plan-header {
        border-radius: 15px 15px 0 0 !important;
        padding: 30px 20px;
    }
    .plan-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }
    .plan-title {
        font-weight: bold;
        margin-bottom: 15px;
    }
    .plan-price .price {
        font-size: 2.5rem;
        font-weight: bold;
    }
    .plan-price .period {
        font-size: 1rem;
        opacity: 0.8;
    }
    .plan-features {
        margin: 0;
        padding: 0;
    }
    .plan-features li {
        padding: 8px 0;
        border-bottom: 1px solid #f8f9fa;
    }
    .plan-features li:last-child {
        border-bottom: none;
    }
    .content-area {
        padding: 80px 20px 20px 20px;
    }
</style>
{% endblock %} 